<html>
    <head>
        <style>
           
        </style>
        <link rel="stylesheet" href="__STATIC__/plugins/webuploader/1.css">
        <link rel="stylesheet" href="https://cdn.staticfile.org/layui/2.4.3/css/layui.min.css">
    </head>
    <body>
        <!--用来存放文件信息-->
        <div id="uploader-area">
            <div id="thelist" class="uploader-list"></div>
            <div class="btns">
                <div id="picker">选择文件</div>
                <button class="layui-btn layui-btn-normal" id="ctlBtn" style="margin-top: 10px;margin-bottom: 200px;">开始上传</button>
            </div>
        </div>
        <script src="https://cdn.staticfile.org/jquery/1.10.0/jquery.min.js"></script>
        <script src="__STATIC__/plugins/webuploader/1.js"></script>
        <script>
            var $btn =$("#ctlBtn");	 //开始上传
            var BASE_URL = window.location.protocol + "://" + window.location.host + ":" + window.location.port;
            // var hash = '';
            function sj() {
              return (new Date()).valueOf();
            }

          //   WebUploader.Uploader.register({
          //     'before-send-file': 'beforeSendFile'
          // }, {
          //     beforeSendFile: function(file) {
          //       var me = this,
          //       owner = this.owner,
          //       server = me.options.server,
          //       deferred = WebUploader.Deferred(); 
                  
          //       owner.md5File(file).progress(function(percentage) {
          //           console.log('Percentage:', percentage);
          //       }).then(function(val) {
          //           console.log('md5 result:', val);
          //           hash = val;
          //           //允许继续执行
          //           deferred.resolve();
          //       });

          //         return deferred.promise();
          //     }
          // });

            

            var uploader = WebUploader.create({
                // swf文件路径
                swf: BASE_URL + '/js/Uploader.swf',
                // 文件接收服务端。
                server: 'upload/file',
                pick:'#picker',
                // 选择文件的按钮。可选。
                // 内部根据当前运行是创建，可能是input元素，也可能是flash.
                multiple:false,
                fileNumLimit: 1,
                chunked: true, //是否要分片处理大文件上传
                chunkSize: 50 * 1024 * 1024, //分片上传，每片2M，默认是5M
                fileSingleSizeLimit: 10 * 1024 * 1024 * 1024,
                // 不压缩image, 默认如果是jpeg，文件上传前会压缩一把再上传！
                resize: false,
                formData: {
                  // hash:hash
                }
            });

            // 当有文件被添加进队列的时候
    uploader.on('fileQueued', function (file) {
      $("#ctlBtn").hide();
      var $list = $('#thelist');
      $list.append('<div id="' + file.id + '" class="item" style="font-weight:bold;padding:10px 30px;">' +
        '<h4 class="info" style="font-weight:bold;">' + file.name + '</h4>' +
        '<p class="state">文件已添加...</p>' +
        '</div>');
      var _html = '<span id="calculate_hash">正在计算文件hash值...进度<span id="hash_percent">0%</span></span>';
      $('#' + file.id).find('p.state').append(_html);
      // $list.append(_html);
      uploader.md5File(file).progress(function(percentage) {
        $("#picker").hide();
        $("#ctlBtn").hide();
        $("#hash_percent").text((percentage*100).toFixed(2)+'%');

      }).then(function(val) {
        $("#calculate_hash").empty().append('<p>计算文件hash值...成功</p>');
        $("#ctlBtn").show();
        $("#ctlBtn").click();
          console.log('md5 result:', val);
          uploader.options.formData.hash = val;
      });
      
      
        uploader.options.formData.ext = file.ext;
        // uploader.options.formData.hash = 
    });
    // 文件上传过程中创建进度条实时显示。
    uploader.on('uploadProgress', function (file, percentage) {

      var $li = $('#' + file.id),
        $percent = $li.find('.progress .progress-bar');

      // 避免重复创建
      if (!$percent.length) {
        $percent = $('<div class="progress progress-striped active" style="margin-top:10px;">' +
          '<div class="progress-bar" role="progressbar" style="width: 0%;">' +
          '</div>' +
          '</div>').appendTo($li).find('.progress-bar');
      }

      $li.find('p.state').text('上传中,请稍等...');

      $percent.css('width', percentage * 100 + '%');
    });

    uploader.on('uploadSuccess', function (file, response) {
      $('#' + file.id).find('p.state').text('已上传...');
    //   $('#' + file.id).find('p.state').append('</br>正在存储数据，请稍等...');
      //存储数据
    //   $.ajax({
    //     type: 'post',
    //     url: "{:url('admin/video/save')}",
    //     data: { videoname: response.oldName, downurl: response.filePath, phase_id: phase_id, grade_id: grade_id, subject_id: subject_id },
    //     success: function (res) {
    //       if (res) {
    //         if (res.code == 0) {
    //           $('#' + file.id).find('p.state').append('</br>储存完成，即将刷新...');
    //           setTimeout(function () {
    //             parent.location.reload();
    //           }, 2000);

    //         } else {
    //           $('#' + file.id).find('p.state').append('</br>存储失败，请重新上传...原因:'+res.msg);
    //         }
    //       }
    //     }
    //   });
    });

    uploader.on('uploadError', function (file) {
      $('#' + file.id).find('p.state').text('上传出错');
    });

    uploader.on('uploadComplete', function (file) {
      $('#' + file.id).find('.progress').fadeOut();
    });

    $btn.on('click', function () {

      if ($(this).hasClass('disabled')) {
        return false;
      }
      uploader.upload();
    });

    

    
        </script>
    </body>
</html>